/**
 * 两点之间画线
 * @param {Number} aX 第一个点的x坐标 
 * @param {Number} aY 第一个点的y坐标 
 * @param {Number} bX 第二个点的x坐标 
 * @param {Number} bY 第二个点的y坐标 
 * @param {Number} color 线的颜色
 * @param {Number} $el 相对于父元素（要在哪个元素里面划线）
 * @param {Number} number 线的开头画上序号
 */ 
import { ILine } from '#/type/lizhao/lizhao'
export function createLine({
	aX, aY, bX, bY,color,$el,number
}:ILine) {
	let html=''
	if(number){
		html=createNum(aX, aY,color,html,number)
	}
	// 计算出倾斜角
	var tX, tY;
	// 
	var rX, rY;
	if (aX < bX) { // b点在a点的右边
		tX = bX - aX;
		rX = 1;
	} else { // b点在a点的左边
		tX = aX - bX;
		rX = -1;
	}
	if (aY < bY) { // b点在a点的下面
		tY = bY - aY;
		rY = 1;
	} else {
		tY = aY - bY;
		rY = -1;
	}
	var k = tY / tX; // 角度比
	// 绘制直线
	var maxX = Math.abs(aX - bX);
	var maxY = Math.abs(aY - bY);
	
	if (maxX > maxY) {
		for(var i=1; i < maxX; i+=5) {
			var tempY = i * k;
			html=createPointer(aX + i * rX, aY + tempY * rY,color,html);
		}
	} else {
		for(var i=1; i < maxY; i+=5) {
			var tempX = i / k;
			html=createPointer(aX + tempX * rX, aY + i * rY,color,html);
		}
	}
	$el.innerHTML+=html
}
// 在指定位置绘制一个点
function createPointer(x:number, y:number,color:string,html:any) {
	html += `<div style="width:2px; height:2px; position:absolute; background:${color}; border-radius:50%; top:${y}px; left:${x}px;" ></div>`;
	return html
}
//在指定位置绘制个序号
function createNum(x:number, y:number,color:string,html:any,number:number) {
	html += `<div style="position:absolute;font-size:12px; color:#fff; top:${y-10}px; left:${x-20}px;padding:0px 1px;border-radius:5px;border:1px solid ${color};background:${color};" >
	${number}
	</div>`;
	return html
}
/**
 * 清空画布
 * @param {Number} id 元素的id 如#lizhao
 */ 
export function clearLine(id:string){
	try{
		let $el=document.querySelector(id)
		$el.innerHTML=''
	}catch(e){
		//TODO handle the exception
		console.log(e);
	}
}
